<template>
  <div class="page flex-col">
    <!-- 头部 -->
    <div class="block_1 flex-col">
      <div class="section_1 flex-row">
        <div class="block_2 flex-col" @click="$router.go(-1)"></div>
        <span class="text_1">购物车</span> <span class="text_2">管理</span>
      </div>
    </div>
    <!-- 主体 -->
    <div class="block_3 flex-col">
      <div class="section_2 flex-col justify-between">
        <div class="section_3 flex-col">
          <div class="section_4 flex-row">
            <input type="checkbox" v-model="chk" />
            <div class="image-text_1 flex-row justify-between">
              <div class="box_1 flex-col"></div>
              <span class="text-group_1">郑州星医汇</span>
            </div>
            <div class="block_4 flex-col"></div>
            <span class="text_3">领券</span>
          </div>
          <div class="section_5 flex-row justify-between">
            <!-- 单选框 -->
            <input type="checkbox" />
            <div class="block_5 flex-col"></div>
            <div class="text-group_2 flex-col justify-between">
              <strong class="paragraph_1"
                >【热拉提】热拉提Plus全面部定点+滑动双模式</strong
              >
              <span class="text_4">孔彦霞</span>
              <span class="text_5">¥1800/次</span>
            </div>
          </div>
          <div class="section_6 flex-row">
            <div class="text-group_3 flex-col justify-between">
              <span class="text_6">订金&nbsp;¥360.00</span>
              <span class="text_7">到院支付&nbsp;¥1440</span>
            </div>
            <van-stepper v-model="value" />
          </div>
        </div>
      </div>
      <div class="section_11 flex-row">
        <img
          class="image_2"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psuqcxp6eqwhpyff25fxivpf2q5f480a2v55412082e-a3d5-4e66-96a9-51cb5277eb8e"
        />
        <div class="image-text_3 flex-row justify-between">
          <div class="section_12 flex-col"></div>
          <span class="text-group_7">为你推荐</span>
        </div>
        <img
          class="image_3"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psxdsv46oai2teavdxc2faqpsckmztj64e9b5280-d43c-4400-a517-c5110f1d429d"
        />
      </div>
      <div class="image-wrapper_4 flex-row justify-between">
        <img
          class="image_4"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/pszafpwouy71jeytfoqwtgyh0njvxy74a7md74809d0c-07f9-4dc5-bb00-fa4009ccc7bb"
        />
        <img
          class="image_5"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps6aif5f1d21mj488dn6d6426381mhuu3269722e54-2946-46f3-a86c-7e473b6233e1"
        />
      </div>
    </div>
    <!-- 底部提交订单 -->
    <div class="section_13 flex-col">
      <div class="box_2 flex-row">
        <!-- <img
            class="thumbnail_4"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psl44gv1hm5risedt201y9t706qlxabg2gpac4a39a79-39b0-4b01-93be-fb1186aec18d"
          /> -->
        <input type="checkbox" />
        <span class="text_20">全选</span>
        <div class="image-text_4 flex-row justify-between">
          <div class="text-group_8 flex-col justify-between">
            <span class="text_21">订金券满399减150</span>
            <div class="text-wrapper_4">
              <span class="text_22">订金合计：</span>
              <span class="text_23">¥330</span>
            </div>
          </div>
          <div class="text-wrapper_5 flex-col">
            <span class="text_24">去结算</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      constants: {},
      chk: false,
      value: 1,
    };
  },
  methods: {},
};
</script>


<style src="./homeStyle/common.css" scoped></style>
<style src="./homeStyle/indexcart.css" scoped></style>
<style lang="scss" scoped>
.page {
  height: 100%;
  .block_3 {
    flex: 1;
    overflow-y: auto;
  }
  .section_4 {
    input {
      width: 33px;
      height: 33px;
      background-color: rgba(239, 91, 126, 1);
      /*-webkit-appearance 改变按钮和其他控件的外观，使其类似于原生控件。 */
      -webkit-appearance: none;
      border: 1.5px solid #c5c5c5;
      border-radius: 50%;
      outline: none;
      // margin-right: 10px;
    }

    input[type="checkbox"]:checked {
      width: 33px;
      height: 33px;
      // background-color: #f6c558;
      background: rgba(239, 91, 126, 1)
        url("https://lanhu.oss-cn-beijing.aliyuncs.com/psrp064qhreaia6cwncozyqcwnw194wgju79707ff5-2f37-4cf3-a66d-1eaf51d79a94")
        no-repeat center center/18px 15px;
    }
  }
  .section_5 {
    input {
      width: 33px;
      height: 33px;
      background-color: rgba(239, 91, 126, 1);
      /*-webkit-appearance 改变按钮和其他控件的外观，使其类似于原生控件。 */
      -webkit-appearance: none;
      border: 1.5px solid #c5c5c5;
      border-radius: 50%;
      outline: none;
      margin-top: 70px;
    }

    input[type="checkbox"]:checked {
      width: 33px;
      height: 33px;
      // background-color: #f6c558;
      background: rgba(239, 91, 126, 1)
        url("https://lanhu.oss-cn-beijing.aliyuncs.com/psrp064qhreaia6cwncozyqcwnw194wgju79707ff5-2f37-4cf3-a66d-1eaf51d79a94")
        no-repeat center center/18px 15px;
    }
  }
  .box_2 {
    input {
      width: 33px;
      height: 33px;
      background-color: rgba(239, 91, 126, 1);
      /*-webkit-appearance 改变按钮和其他控件的外观，使其类似于原生控件。 */
      -webkit-appearance: none;
      border: 1.5px solid #c5c5c5;
      border-radius: 50%;
      outline: none;
      margin-top: 23px;
    }

    input[type="checkbox"]:checked {
      width: 33px;
      height: 33px;
      // background-color: #f6c558;
      background: rgba(239, 91, 126, 1)
        url("https://lanhu.oss-cn-beijing.aliyuncs.com/psrp064qhreaia6cwncozyqcwnw194wgju79707ff5-2f37-4cf3-a66d-1eaf51d79a94")
        no-repeat center center/18px 15px;
    }
  }
  .section_6 {
    .van-stepper {
      margin-left: 100px;
    }
  }
}
</style>
